cc-pocket · composer

Attach image — icon spec

Lives at the left of the multiline composer, opposite Send. Taps open the system photo picker (multi-select, up to 4). Must read as “add a photo” instantly — universal, calm, on the app’s 1.5pt rounded-line system.

Primary direction · recommended
add_photo_alternate · restyled

Picture frame + “＋” badge

The mainstream “add photo” metaphor: a rounded image frame holding a sun and mountain, with a small plus at the top-right corner signalling add. The frame’s top-right corner opens to give the plus room so it never feels crowded.

States · verified on surface #16181B
Default
stroke · #9BA1A6
Pressed / active
stroke · #D97757
Disabled
stroke · #6B7177
In place · composer row
Message Claude…

Optical weight sits a touch lighter than the filled Send button — correct for a secondary affordance. The plus badge keeps the left glyph from reading as a bare photo thumbnail.

Small-size hold-up
24dp · target
20dp · compact
18dp · stress test

At 20dp the plus stays separable from the frame; below ~18dp the badge starts to merge — drop to Variant A if you ever render the affordance smaller than 20dp.

Alternates
A · strong runner-up

Plain image (no ＋)

Frame + mountain + sun, nothing else. Calmest and most balanced at any size — use when the plus reads noisy at 24dp.

B · generic

Paperclip

Universal “attach”, but not image-specific — implies files/docs too. Pick only if attachments expand beyond photos.

C · busiest

Stack of photos

Two overlapping frames hint multi-select, but the doubled outline is the heaviest glyph here and softens first when small.

Recommendation
1
Primary — frame + ＋ badge
Most explicit “add a photo” read while staying calm. Holds to 20dp. Ship this for the composer’s default size (44dp tap target, 24dp glyph).
2
Variant A — plain image
The safest fallback and the most legible small. Swap in automatically below 20dp, or if the plus feels fussy beside Send.
3
Variant B — paperclip
Reach for it only if attach scope grows past images.
4
Variant C — stack
Nice multi-select hint, but optically the busiest; least suited to 20dp.
Deliverable · SVG (24×24, stroke 1.5)
<!-- cc-pocket / attach-image · primary -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
     stroke="currentColor" stroke-width="1.5"
     stroke-linecap="round" stroke-linejoin="round">
  <path d="M13 4H6.5A2.5 2.5 0 0 0 4 6.5V17.5A2.5 2.5 0 0 0 6.5 20H16.5A2.5 2.5 0 0 0 19 17.5V11"/>
  <path d="M19 4.2V9M16.6 6.6H21.4"/>            <!-- + badge -->
  <circle cx="8.7" cy="9.4" r="1.4"/>             <!-- sun -->
  <path d="M4.4 17.6L9 12.6L12.2 15.8L14.2 13.6L18.4 17.8"/>  <!-- mountain -->
</svg>

Compose: translate each path with PathNode commands; circle → arc pair. Use one ImageVector with stroke = MaterialTheme color so the three states are a single color swap.